<template>
    <div class="map_box">
        <baidu-map
                class="bmView"
                :scroll-wheel-zoom="true"
                :center="center"
                :zoom="zoom"
                :map-click="false"
                @moveend="syncCenterAndZoom"
                @zoomend="syncCenterAndZoom"

                @ready="mapReady"
                ak="HlMs7bB8XxHiWZirZKHoQoZgPZwDU7g4"
        >   
            <div v-if="points.length>0">
                 <div class="line_box" v-for="(item,index) in points" :key="index" >
                    <bml-curve-line v-for="(item1,index) in item.points" :key="index"  :points="item1.points" :strokeColor="item1.color"></bml-curve-line>
                </div>
            </div>
           
            <div v-for="(line,ind) in lines" :key="'l_'+ind" style="cursor:pointer">
                <bm-polyline style="cursor:pointer" @click="clickLine(line)" :path="line.path" :stroke-color="line.color" :stroke-opacity="0.9" :stroke-weight="6" :editing="false"></bm-polyline>
            </div>
            <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
            <div v-if="markers.length>0">
                <div v-for="(marker,ind) in markers" :key="'m_'+ind">
                <bm-marker :position="{lng: marker.lng, lat: marker.lat}" :icon="getIcon(marker)" @mouseover="markerClick(marker)">
                </bm-marker>
            </div>
            </div>
            <bm-overlay
                    @mouseleave.native="closeMark"
                    v-if="active"
                    pane="labelPane"
                    :class="{sample: true}"
                    @draw="draw">
                <div v-if="selectMarker.type==='u'" @click="clickOverLay(selectMarker.employeeId)">
                    <div class="pointer_img">
                        <img v-if="selectMarker.img" :src="selectMarker.img" alt="">
                    </div>
                    <div class="pointer_name">
                        {{selectMarker.name}}
                    </div>
                    <div class="pointer_phone">
                        {{selectMarker.phone}}
                    </div>
                    <div class="pointer_phone">
                        {{selectMarker.employeeId}}
                    </div>
                    <div class="pointer_phone">
                        {{selectMarker.roadName}}
                    </div>
                </div>
                <div v-if="selectMarker.type==='p'">
                    <div class="pointer_title">
                        {{selectMarker.name}}
                    </div>
                    <div class="pointer_info">
                        车位总数：{{selectMarker.all}}
                    </div>
                    <div class="pointer_info">
                        实时泊位数：{{selectMarker.real_time}}
                    </div>
                    <div class="pointer_info">
                        共享车位数：{{selectMarker.share}}
                    </div>
                    <div class="pointer_info">
                        收费规则：{{selectMarker.feeDesc}}
                    </div>
                </div>
                <div v-if="selectMarker.type==='ug'">
                    <div class="pointer_title">
                        位置：{{selectMarker.address}}
                    </div>
                    <div class="pointer_info">
                        运管员总数：{{selectMarker.users}}
                    </div>
                    <div class="pointer_info">
                        <el-row>
                            <el-col :span="12">
                                <div class="point_line_tongji line1"><i></i>准停:{{selectMarker.line1}}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="point_line_tongji line2"><i></i>禁停:{{selectMarker.line2}}</div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="pointer_info">
                        <el-row>
                            <el-col :span="12">
                                <div class="point_line_tongji line3"><i></i>限停:{{selectMarker.line3}}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="point_line_tongji line4"><i></i>临停:{{selectMarker.line4}}</div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </bm-overlay>
        </baidu-map>
    </div>
</template>

<script>
    import selfPointerIcon from '@/assets/images/pointer_icon.png'
    import selfPointerIcon1 from '@/assets/images/pointer_icon1.png'
    import selfPointerIcon2 from '@/assets/images/pointer_icon2.png'
    import {BmlCurveLine} from 'vue-baidu-map'
    export default {
        name: "sysMap",
        components: {
            BmlCurveLine
        },
        props: {
            markers: {
                type: Array,
                default() {
                    return [
                        // {
                        //     "lng": "116.404",//统计位置坐标
                        //     "lat": "39.915",//统计位置坐标
                        //     "type": "ug",//类型ug为运管员统计类型
                        //     "line1": "1222",//准停
                        //     "line2": "1233",//禁停
                        //     "line3": "1244",//限停
                        //     "line4": "1255",//临停
                        //     "address": "历下区",//统计位置地址
                        //     "users": "32"//运管员汇总数量
                        // }
                        /*{
                        lng: 116.404,
                        lat: 39.915,
                        type: 'u',
                        img: '',
                        name: '张三',
                        phone: '123456789'
                    }, {
                        lng: 115.504,
                        lat: 39.915,
                        type: 'p',
                        name: 'xxxx停车位',
                        all: '300',//所有
                        count: '200',//预约
                        share: '100'//共享
                    }, {
                        lng: 115.594,
                        lat: 39.915,
                        type: 'b',
                        address: '龙奥北路',//地址
                        count: '200',//检测数量
                        exception: '100'//异常数量
                    }*/]
                }
            },
            lines: {
                type: Array,
                default() {
                    return [
                        /*{
                        path: [
                            {lng: 116.414, lat: 39.9105},
                            {lng: 116.425, lat: 39.920},
                            {lng: 116.433493, lat: 39.937445}
                        ],
                        color: '#81FF5D'
                    },{
                        path: [
                            {lng: 116.444, lat: 39.945},
                            {lng: 116.455, lat: 39.950},
                            {lng: 116.463493, lat: 39.967445}
                        ],
                        color: '#FF6F6F'
                    },{
                        path: [
                            {lng: 116.474, lat: 39.975},
                            {lng: 116.485, lat: 39.980},
                            {lng: 116.493493, lat: 39.907445}
                        ],
                        color: '#F7B500'
                    },{
                        path: [
                            {lng: 116.404, lat: 39.955},
                            {lng: 116.415, lat: 39.940},
                            {lng: 116.423493, lat: 39.937445}
                        ],
                        color: '#3473FE'
                    }*/]
                }
            },
            points:{
                type:Array,
                value:[]
            }
        },
        mounted() {
            console.log("989",this.markers)
        },
        data() {
            return {
                BMap: null, // 地图组件是否就绪
                choosedLocation: { province: '', city: '', district: '', addr: '' },
                show: false,
                active: false,
                center: {lng: 0, lat: 0},
                zoom: 14,
                selfPointerU: {
                    url:selfPointerIcon,
                    size: {width: 32, height: 32}
                },
                selfPointerP: {
                    url:selfPointerIcon1,
                    size: {width: 32, height: 32}
                },
                selfPointerB: {
                    url:selfPointerIcon2,
                    size: {width: 32, height: 32}
                },
                selectMarker: {
                    lng: 0,
                    lat: 0,
                    type: 'u',
                    all: '',
                    count: '',
                    share: '',
                    img: '',
                    name: '',
                    phone: '',
                    checked_num: '',
                    street_name: '',
                    anomaly_num: '',
                    users: '',
                    address: '',
                    line1: '',
                    line2: '',
                    line3: '',
                    line4: ''
                },
                center: {
                    lng: 117.022306,
                    lat: 36.667463
                }
            };
        },
        methods: {
            onHideMarker() {
                this.active = false
                this.selectMarker = {
                    lng: 0,
                    lat: 0,
                    type: 'u',
                    all: '',
                    count: '',
                    share: '',
                    img: '',
                    name: '',
                    phone: '',
                    checked_num: '',
                    street_name: '',
                    anomaly_num: '',
                    users: '',
                    address: '',
                    line1: '',
                    line2: '',
                    line3: '',
                    line4: ''
                }
            },
            /** *
             * 地图点击事件。
             */
            getClickInfo(e) {
                // 调整地图中心位置
                this.center.lng = e.point.lng
                this.center.lat = e.point.lat

                // 此时已经可以获取到BMap类
                if (this.BMap) {
                    const that = this
                    // Geocoder() 类进行地址解析
                    // 创建地址解析器的实例
                    const geoCoder = new this.BMap.Geocoder()
                    // getLocation() 类--利用坐标获取地址的详细信息
                    // getPoint() 类--获取位置对应的坐标
                    geoCoder.getLocation(e.point, function(res) {
                        // console.log('获取经纬度', e.point, '获取详细地址', res)
                        const addrComponent = res.addressComponents
                        const surroundingPois = res.surroundingPois
                        const province = addrComponent.province
                        const city = addrComponent.city
                        const district = addrComponent.district
                        let addr = addrComponent.street
                        if (surroundingPois.length > 0 && surroundingPois[0].title) {
                            if (addr) {
                                addr += `-${surroundingPois[0].title}`
                            } else {
                                addr += `${surroundingPois[0].title}`
                            }
                        } else {
                            addr += addrComponent.streetNumber
                        }
                        that.choosedLocation = { province, city, district, addr, ...that.center }
                        that.$emit('changeCenter',{
                            zoom: that.zoom,
                            location: that.choosedLocation
                        })
                    })
                }
            },
            syncCenterAndZoom(e) {
                // 返回地图当前的缩放级别
                this.zoom = e.target.getZoom()
                const position = e.target.getCenter()
                // 此时已经可以获取到BMap类
                if (this.BMap) {
                    const that = this
                    // Geocoder() 类进行地址解析
                    // 创建地址解析器的实例
                    const geoCoder = new this.BMap.Geocoder()
                    // getLocation() 类--利用坐标获取地址的详细信息
                    // getPoint() 类--获取位置对应的坐标
                    geoCoder.getLocation(position, function(res) {
                        // console.log('获取经纬度', position, '获取详细地址', res)
                        const addrComponent = res.addressComponents
                        const surroundingPois = res.surroundingPois
                        const province = addrComponent.province
                        const city = addrComponent.city
                        const district = addrComponent.district
                        let addr = addrComponent.street
                        if (surroundingPois.length > 0 && surroundingPois[0].title) {
                            if (addr) {
                                addr += `-${surroundingPois[0].title}`
                            } else {
                                addr += `${surroundingPois[0].title}`
                            }
                        } else {
                            addr += addrComponent.streetNumber
                        }
                        that.choosedLocation = { province, city, district, addr, ...position }
                        that.$emit('changeCenter',{
                            zoom: that.zoom,
                            location: that.choosedLocation
                        })
                    })
                }
            },
            showPersonPoint(ind){
                this.center.lng = this.markers[ind].lng
                this.center.lat = this.markers[ind].lat
                this.markerClick(this.markers[ind])
            },
            getIcon(marker) {
                // return {
                //     url:marker.icon,
                //     size: {width: 32, height: 32}
                // }
                if(marker.type === 'u') {
                    return this.selfPointerU
                }else if(marker.type === 'p') {
                    return this.selfPointerP
                }else if(marker.type === 'b') {
                    return this.selfPointerB
                }else if(marker.type === 'ug') {
                    return this.selfPointerU
                }
            },
            draw ({el, BMap, map}) {
                const pixel = map.pointToOverlayPixel(new BMap.Point(this.selectMarker.lng, this.selectMarker.lat))
                el.style.left = pixel.x - 90 + 'px'
                el.style.top = pixel.y - 180 + 'px'
            },
            mapReady({ BMap, map }) {
                let mapStyle={style:'midnight'}
                map.setMapStyle(mapStyle);
                // console.log(BMap, map);
                // var view = map.getViewport(eval(this.markers))
                // this.zoom = view.zoom;
                // this.center = view.center;
                // const that = this
                this.BMap = BMap
                // if (this.BMap) {
                //     // 获取定位地址信息并赋值给声明变量
                //     // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
                //     const geolocation = new this.BMap.Geolocation()
                //     // 通过 getCurrentPosition() 方法：获取当前的位置信息
                //     geolocation.getCurrentPosition(res => {
                //         console.log('返回详细地址和经纬度', res)
                //         const { lng, lat } = res.point
                //         const { province, city, district, street, street_number } = res.address
                //
                //         that.center = { lng, lat }
                //         that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
                //         console.log(that.choosedLocation)
                //     })
                // }
            },
            markerClick(obj){
                this.active = false
                // this.selectMarker.lng = obj.lng
                // this.selectMarker.lat = obj.lat
                // this.selectMarker.type = obj.type
                if(obj.type === 'u'){
                    this.selectMarker.img = obj.img
                    this.selectMarker.name = obj.name
                    this.selectMarker.phone = obj.phone
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                    this.selectMarker.employeeId = obj.employeeId
                    this.selectMarker.roadName = obj.roadName
                }else if(obj.type === 'p'){
                    this.selectMarker.all = obj.all
                    this.selectMarker.name = obj.name
                    this.selectMarker.count = obj.count
                    this.selectMarker.real_time = obj.real_time
                    this.selectMarker.share = obj.share
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                }else if(obj.type === 'b'){
                    this.selectMarker.street_name = obj.street_name
                    this.selectMarker.anomaly_num = obj.anomaly_num
                    this.selectMarker.checked_num = obj.checked_num
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                }else if(obj.type === 'ug'){
                    // "line1": "12",//临停
                    // "line2": "12",//禁停
                    // "line3": "12",//限停
                    // "line4": "12",//准停
                    // "address": "历下区",//统计位置地址
                    // "users": "32"//运管员汇总数量
                    this.selectMarker.address = obj.address
                    this.selectMarker.users = obj.users
                    this.selectMarker.line1 = obj.line1
                    this.selectMarker.line2 = obj.line2
                    this.selectMarker.line3 = obj.line3
                    this.selectMarker.line4 = obj.line4
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                }
                setTimeout(() => {
                    this.active = true
                },100)
            },
            closeMark() {
                this.active = false
            },
            //点击线
            clickLine(e){
                //console.log(e.bdCarParkNumber,"02");
                this.$emit("clickLineHandel",e.bdCarParkNumber)
            },
            clickOverLay(id){
                //console.log("员工id",id)
                this.$emit("getEmployeeLine",id)
            }
        },
    }
</script>

<style scoped>
    .map_box{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        z-index: 99;
    }
    .bmView{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background-color: #08304A!important;
    }
    .bmView div{
        background-color: transparent!important;
    }
</style>
<style>
    .sample {
        width: 180px;
        height: 170px;
        line-height: 40px;
        overflow: hidden;
        color: #32FFB4;
        text-align: center;
        position: absolute;
        background-image: url("~@/assets/images/map_pointer.png");
        background-position: 0 0;
        background-size:100% 100%;
        background-repeat: no-repeat;
    }
    .pointer_img{
        margin:12px auto 0 auto;
        width:32px;
        height:32px;
        border-radius: 32px;
        background: #fff;
        overflow: hidden;
    }
    .pointer_img img{
        width:32px;
        height:32px;
        display: block;
        padding:0;
        margin:0;
    }
    .pointer_name{
        padding:8px 0 4px 0;
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:800;
        color:#32FFB4;
        line-height:18px;
    }
    .pointer_phone{
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:800;
        color:#32FFB4;
        line-height:18px;
    }
    .pointer_title{
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#32FFB4;
        line-height:18px;
        padding:8px 0 4px 16px;
        text-align: left;
    }
    .pointer_info{
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:400;
        color:#32FFB4;
        line-height:18px;
        text-align: left;
        padding: 0 0 4px 16px;
    }
    .point_line_tongji{
        position:relative;
        padding-left:12px;
        margin-left:-5px;
    }
    .point_line_tongji i{
        position:absolute;
        top:4px;
        left:0px;
        width:10px;
        height:10px;
        border-radius: 10px;
    }
    .line1 i{
        background: #81FF5D;
    }
    .line2 i{
        background: #FF6F6F;
    }
    .line3 i{
        background: #F7B500;
    }
    .line4 i{
        background: #3473FE;
    }
</style>
